import React from 'react';
import {connect} from 'dva'
import PropTypes from 'prop-types';
import TweenOne from 'rc-tween-one';
import {Menu, Input, message, notification, Icon} from 'antd';
import {getcookie, setcookie} from '../../utils/cookies'
import WechatLogin from './WechatLogin/index'
import IconLogoClass from '../Public/Icons/LogoClass';
const Search = Input.Search;
const Item = Menu.Item;
const SubMenu = Menu.SubMenu;
import 'antd/dist/antd.css'
// import  Input from 'material-ui@1.0.0/Input';
class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      phoneOpen: false,
      isLogined: false,
      open: false,//默认不打开登录窗口
    };
  }

  handleClose = () => {
    this.setState({
      open: false
    });
  };

  phoneClick = () => {
    this.setState({
      phoneOpen: !this.state.phoneOpen,
    });
  };

  componentWillMount() {
    const isLogined = !!getcookie('unionid');
    const unionid = getcookie('unionid');
    // const cookieToken = getcookie('cookieToken') ? getcookie('cookieToken') : null;
    const headImgUrl = getcookie('headImgUrl') ? getcookie('headImgUrl') : null;
    const status = getcookie('status') ? getcookie('status') : null;
    const nickname = getcookie('nickname') ? getcookie('nickname') : null;

    this.setState({
      unionid,
      isLogined,
      // cookieToken,
      headImgUrl,
      status,
      nickname,
    })
  }

  componentWillReceiveProps(props) {

// console.log('登录以后的状态变化了',props)

    const unionid = getcookie('unionid');
    const headImgUrl = getcookie('headImgUrl') ? getcookie('headImgUrl') : null;
    const status = getcookie('status') ? getcookie('status') : null;
    const nickname = getcookie('nickname') ? getcookie('nickname') : null;
    // console.log(unionid,headImgUrl,status,nickname)
    this.setState({
      isLogined : props.isLogined,
    })
  }

  render() {
    // console.log('nav中state变化',this.state)
    const props = {...this.props};
    const isMode = props.isMode;
    delete props.isMode;
    const nickname = getcookie('nickname') ? getcookie('nickname') : null;
    //定义
    const userTitle = (<div>
      <span>{this.state.isLogined ?
       <span>
         <span>
         {`欢迎${nickname ? nickname : '小黄人'}` }
         </span>
         <span onClick={()=>{
           setcookie("headImgUrl",'',1);
           setcookie("nickname",'',1);
           setcookie("role",'',1);
           setcookie("unionid",'',1);
           setcookie("status",'',1);
         this.setState({
           isLogined: false
         })
         }}> 退出 </span>
       </span>
        :
        '登录'}</span>
    </div>);
    //控制登录框是否出现
    const isShowLogin = this.state.open ? <WechatLogin open={this.state.open} handleClose={this.handleClose} user={this.state.user}/> : '';

    return (<TweenOne
      component="header"
      animation={{opacity: 0, type: 'from'}}
      {...props}
    >
      <div className={`${this.props.className}-logoAndSearch`}>
        <TweenOne
          className={`${this.props.className}-logoAndSearch-logo`}
          animation={{x: -30, delay: 100, type: 'from', ease: 'easeOutQuad'}}
          id={`${this.props.id}-logo`}
        >
          <IconLogoClass/>
          <span>环球云逸课堂</span>

        </TweenOne>

        <TweenOne
          className={`${this.props.className}-logoAndSearch-search`}
          animation={{x: -30, delay: 100, type: 'from', ease: 'easeOutQuad'}}
          id={`${this.props.id}-search`}
        >
          <Search placeholder="搜索你想学习的课程"
                  style={{width: 200}}
                  onSearch={value => console.log(value)}
          />
        </TweenOne>

      </div>

      {/*mode表示mobile device手机设备的时候样式和内容有些差异*/}
      {isMode ? (<div
          className={`${this.props.className}-phone-nav${this.state.phoneOpen ? ' open' : ''}`}
          id={`${this.props.id}-menu`}
        >
          <div
            className={`${this.props.className}-phone-nav-bar`}
            onClick={() => {
              this.phoneClick();
            }}
          >
            <em />
            <em />
            <em />
          </div>
          <div
            className={`${this.props.className}-phone-nav-text`}
          >
            <Menu
              defaultSelectedKeys={['0']}
              mode="inline"
              theme="dark"
            >
              <span> {this.state.isLogined ? `欢迎XXX` : `登录`}</span>
              <span> / </span>
              <span>注册</span>
              <span> | </span>
              <span>管理后台</span>
            </Menu>
          </div>
        </div>) :
        <TweenOne
          animation={{x: 30, delay: 100, opacity: 0, type: 'from', ease: 'easeOutQuad'}}
          className={`${this.props.className}-nav-text`}
        >

          <span className="a1">
            <span style={{width: 20}}>
              <Menu mode="horizontal" onClick={(e) => {
                {/*console.log(e)*/}
                if (this.state.isLogined) {//如果登录了就允许用户退出

                } else if (e.key == "teacher" || e.key == "student") {//否则挑出二维码框让用户扫码
                    this.setState({
                      open: true,
                      user: e.key
                    })
                }
              }}>
               <SubMenu className="user" title={userTitle} key="user" >
                <Item key="student" >我是学生</Item>
                <Item key="teacher">我是老师</Item>
               </SubMenu>
               <Item>
                 <span className="a3"
                             onClick={() => {
                               let unionid = getcookie("unionid")
                               if (unionid != '' && unionid != undefined && unionid != null) {
                                 this.props.fatherProps.dispatch({type: "index/indexToMycourse", payload: {unionid}})
                               } else {
                                 message.error('请先登录')
                               }
                             }}
               >我的课程</span>
               </Item>
                <Item>
                  <span className="a3"
                     onClick={() => {
                       {/*console.log("-----------------")*/}
                       let unionid = getcookie("unionid")
                       if (unionid != '' && unionid != undefined && unionid != null) {
                         {/*this.props.fatherProps.dispatch({type:"index/indexToMycourse",payload:{unionid}})*/
                         }
                         notification.config({
                           placement: 'topRight',

                         });
                         notification.open({
                           message: '温馨提示',
                           description: "请点‘我的课程’，然后点击‘已报名课程’，进入课程详情页面，再点击章节或者当前直播，查看具体的直播哦",
                           duration: 0,
                           style: {
                             marginTop:60,
                           },
                           icon: <Icon type="smile-circle" style={{color: '#108ee9'}}/>,
                         });


                       } else {
                         {/*window.location.replace("https://open.weixin.qq.com/connect/qrconnect?appid=wxd7be34e0f2844079&redirect_uri=http%3a%2f%2fv.huanqiushuju.com%2flogins&response_type=code&scope=snsapi_login&state=2#wechat_redirect");*/}
                         notification.config({
                           placement: 'topRight',

                         });
                         notification.open({
                           message: '温馨提示',
                           description: '请先登录',
                           duration: 0,

                           icon: <Icon type="smile-circle" style={{color: '#108ee9'}}/>,
                         });


                       }
                     }}
               >去听直播</span>
                </Item>
              </Menu>
            </span>

            </span>
          {/*登录窗口*/}
          {isShowLogin}

          {/*<span className= "a4"> | </span>*/}
          {/*<span className= "a5">管理后台</span>*/}

        </TweenOne>
      }
    </TweenOne>);
  }
}

Header.propTypes = {
  className: PropTypes.string,
  isMode: PropTypes.bool,
  id: PropTypes.string,
};

Header.defaultProps = {
  className: 'header1',
};

function mapStateToProps(state) {
  // console.log(state.index.isLogined)
  return {
    isLogined:state.index.isLogined
  };
}

export default connect(mapStateToProps)(Header);
